﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

        .tdtext {
            font-family: "宋体";
            font-size: 25px;
            height: 14%;
            text-align: center;
            background-color: #f5b754;
        }

        .tdbutton {
            height: 14%;
            text-align: center;
        }

        select {
            font-size: 30px;
            width: 30%;
            height: 50%;
        }
        .timepick {
            height: 50%;
            width: 80%;
            font-size: 20px;
        }
    </style>
     <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../../Scripts/jqplot/excanvas.js"></script><![endif]-->
    <script src="../../Scripts/jqplot/jquery.min.js"></script>
    <script src="../../Scripts/jqplot/jquery.jqplot.min.js"></script>
    <script src="../../Scripts/jqplot/plugins/jqplot.barRenderer.min.js"></script>
    <link href="../../Scripts/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
    <script src="../../Scripts/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
    <script src="../../Scripts/jqplot/plugins/jqplot.pointLabels.min.js"></script>
    <script src="../../Scripts/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script src="../../Scripts/mobiscroll/js/mobiscroll.custom-2.6.2.min.js"></script>
    <link href="../../Scripts/mobiscroll/css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" />
    <script src="../../Scripts/Timer/Timer.js"></script>

    <script>

        var plot1;
        $(function () {
            var myDate = new Date();
            CMPTimer();
            getchat('', '', '人员','3');

            
        });
        $(function () {
            var curr = new Date().getFullYear();
            var opt = {};

            opt.date = { preset: 'date' };

            $('#txtTimeFrom').val('').scroller('destroy').scroller($.extend(opt['date'], { theme: 'android-ics light', mode: 'scroller', display: 'modal', lang: 'zh' }));
            $('#txtTimeTo').val('').scroller('destroy').scroller($.extend(opt['date'], { theme: 'android-ics light', mode: 'scroller', display: 'modal', lang: 'zh' }));


            $('#btnSerach').click(function() {

                getchat($('#txtTimeFrom').val(),$('#txtTimeTo').val(),$('#selecttype').val(),$('#rank').val());
            });
           

        });

        function getchat(fromtime, totime, type, rank) {

            $.ajax({
                url: "../../Ranklist/GetChatInfo",
                data: { 'fromtime': fromtime, 'totime': totime, 'type': type, 'rank': rank },
                dataType: "json",
                success: function (data) {

                    var s1 = new Array();
                    var ticks = new Array();
                    $(data).each(function () {
                        s1.push(this.manyipercent * 100);
                        ticks.push(this.myname);
                    });

                    if (plot1) {
                        plot1.destroy();
                    }
                    plot1 = $.jqplot('chart1', [s1], {
                        // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
                        animate: !$.jqplot.use_excanvas,
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            pointLabels: { show: true }
                        },
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                ticks: ticks
                            },
                            yaxis: {
                                tickOptions: {
                                    formatString: "%.2f%"
                                },
                                rendererOptions: {
                                    forceTickAt0: true
                                }
                            }
                        },
                        highlighter: { show: false }
                    });
                }

            });
        }
    </script>
    
</head>

<body>

    <div style="width: 1920px; height: 1080px; margin: auto; background: url(../../images/mypx.jpg) no-repeat">

        <div style="width: 1459px; height: 588px; padding-left: 230px; padding-top: 326px;">
            <table style="width: 100%; height: 588px;">
                <tr>
                    <td style="width: 50%">
                        <table style="width: 100%; height: 588px;">
                            <tr>
                                <td class="tdtext">按时间段：
                                </td>
                            </tr>
                            <tr>
                                <td class="tdbutton">
                                    <table style="width: 100%;height: 100%;">
                                        <tr>
                                            <td style="width: 45%;">
                                                <input type="text" name="test_default" id="txtTimeFrom" class="timepick"/></td>
                                            <td style="width: 10%;font-size: 20px;">至
                                            </td>
                                            <td style="width: 45%">
                                                <input type="text" name="test_default" id="txtTimeTo" class="timepick"/></td>
                                        </tr>
                        </table>
                    </td>
                    </tr>
                            <tr>
                                <td class="tdtext">按类型：
                                </td>
                            </tr>
                    <tr>
                        <td class="tdbutton">
                            <select id="selecttype">
                                <option value="窗口">窗口</option>
                                <option value="人员">人员</option>

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdtext">查询名次：
                        </td>
                    </tr>
                    <tr>
                        <td class="tdbutton">

                            <select id="rank">
                                <option value="3">前3名</option>
                                <option value="5">前5名</option>
                                <option value="10">前10名</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdbutton">
                            <input type="image" src="../../Images/chaxun.gif" id="btnSerach" />
                        </td>
                    </tr>
                    </table>
                    </td>
                    <td style="width: 50%;height: 588px; ">
                        <div id="chart1" style="height: 588px;"  ></div>
                    </td>
                </tr>

            </table>
        </div>


    </div>
     <input type="image" src="../../Images/back.jpg" style="position: absolute; top: 902px;left:1742px" onclick="javascript: window.history.go(-1);" id="back"/>
</body>
</html>
